Technical review: Document interest invokers #42021

chrisdavidmills · 2025-11-19T16:44:58Z

Description

Chrome 142 adds support for interest invokers: see https://chromestatus.com/feature/4530756656562176.

This PR aims to document all features of interest invokers. Specifically, it will add:

A listing of all the interest invoker features on the popover API landing page (it really feels like it is part of this API, although I appreciate it has use cases outside popovers). If this isn't appropriate, I can quite easily separate it out.
An interest invokers guide.
Reference pages for the interestfor attribute, which is available on the <a>, <button>, <area>, and SVG <a> elements.
A ref page for the :interest-source pseudo-class.
A ref page for the :interest-target pseudo-class.
Ref pages for the interest-delay, interest-delay-start, and interest-delay-end properties.
Ref pages for the interestForElement property, which is available on the HTMLButtonElement, HTMLAnchorElement, HTMLAreaElement, and SVGAElement interfaces.
Ref pages for the interest and loseinterest events, which are fired on the HTMLElement interface.
Ref pages for the InterestEvent interface.

Motivation

Additional details

Related issues and pull requests

github-actions · 2025-11-19T16:47:00Z

Preview URLs (28 pages)

Flaws (183)

Note! 15 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/HTMLAreaElement
Title: HTMLAreaElement
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/API/HTMLAreaElement/noHref

URL: /en-US/docs/Web/API/Popover_API
Title: Popover API
Flaw count: 2

macros:
- Macro produces link /en-US/docs/Web/CSS/::backdrop which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:popover-open which is a redirect

URL: /en-US/docs/Web/API/Popover_API/Interest_invokers
Title: Using interest invokers
Flaw count: 8

macros:
- Macro produces link /en-US/docs/Web/CSS/display which is a redirect
- Macro produces link /en-US/docs/Web/CSS/background-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/position-area which is a redirect
- Macro produces link /en-US/docs/Web/CSS/transition which is a redirect
- Macro produces link /en-US/docs/Web/CSS/opacity which is a redirect
- and 3 more flaws omitted

URL: /en-US/docs/Web/API/Popover_API/Using
Title: Using the Popover API
Flaw count: 19

macros:
- Macro produces link /en-US/docs/Web/CSS/display which is a redirect
- Macro produces link /en-US/docs/Web/CSS/appearance which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:popover-open which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:popover-open which is a redirect
- Macro produces link /en-US/docs/Web/CSS/::backdrop which is a redirect
- and 14 more flaws omitted

URL: /en-US/docs/Web/CSS/Guides/Basic_user_interface
Title: CSS basic user interface
Flaw count: 26

macros:
- Macro produces link /en-US/docs/Web/CSS/outline which is a redirect
- Macro produces link /en-US/docs/Web/CSS/outline-offset which is a redirect
- Macro produces link /en-US/docs/Web/CSS/accent-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/caret-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/cursor which is a redirect
- and 21 more flaws omitted

URL: /en-US/docs/Web/CSS/Guides/Selectors
Title: CSS selectors
Flaw count: 95

macros:
- Macro produces link /en-US/docs/Web/CSS/:active which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:any-link which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:autofill which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:buffering which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:checked which is a redirect
- and 90 more flaws omitted

URL: /en-US/docs/Web/CSS/Reference/Properties/interest-delay
Title: interest-delay
Flaw count: 7

broken_links:
- Can't resolve /en-US/docs/Web/CSS/interest-delay-start
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#curly_braces is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/time is a redirect
macros:
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect

URL: /en-US/docs/Web/CSS/Reference/Properties/interest-delay-end
Title: interest-delay-end
Flaw count: 4

broken_links:
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/time is a redirect
macros:
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect

URL: /en-US/docs/Web/CSS/Reference/Properties/interest-delay-start
Title: interest-delay-start
Flaw count: 4

broken_links:
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/time is a redirect
macros:
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect
- Macro produces link /en-US/docs/Web/CSS/time which is a redirect

URL: /en-US/docs/Web/CSS/Reference/Selectors/:interest-source
Title: :interest-source
Flaw count: 2

macros:
- Macro produces link /en-US/docs/Web/CSS/background-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/color which is a redirect

URL: /en-US/docs/Web/HTML/Reference/Elements/a
Title: <a>: The Anchor element
Flaw count: 4

macros:
- Macro produces link /en-US/docs/Web/CSS/margin which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:link which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:visited which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:any-link which is a redirect

URL: /en-US/docs/Web/HTML/Reference/Elements/button
Title: <button>: The Button element
Flaw count: 6

macros:
- Macro produces link /en-US/docs/Web/CSS/::after which is a redirect
- Macro produces link /en-US/docs/Web/CSS/::before which is a redirect
- Macro produces link /en-US/docs/Web/CSS/margin which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:focus-visible which is a redirect
- Macro produces link /en-US/docs/Web/CSS/:focus which is a redirect
- and 1 more flaws omitted

URL: /en-US/docs/Web/SVG/Reference/Element/a
Title: <a>
Flaw count: 5

macros:
- Macro produces link /en-US/docs/Web/SVG/Element which is a redirect
- Macro produces link /en-US/docs/Web/SVG/Element which is a redirect
- Macro produces link /en-US/docs/Web/SVG/Element which is a redirect
- Macro produces link /en-US/docs/Web/SVG/Element which is a redirect
- Macro produces link /en-US/docs/Web/SVG/Element which is a redirect

External URLs (1)

URL: /en-US/docs/Web/API/Popover_API
Title: Popover API

https://mdn.github.io/dom-examples/popover-api/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-11-22 14:59:08)

files/en-us/web/api/popover_api/index.md

mfreed7

Overall LGTM! This looks great to me, thanks for putting it together. I left some comments, but all of them are fairly small.

mfreed7 · 2025-11-21T18:12:31Z

files/en-us/web/api/htmlanchorelement/index.md

  - : A string that is the result of parsing the [`href`](/en-US/docs/Web/HTML/Reference/Elements/a#href) HTML attribute relative to the document, containing a valid URL of a linked resource.
 - {{domxref("HTMLAnchorElement.hreflang")}}
  - : A string that reflects the [`hreflang`](/en-US/docs/Web/HTML/Reference/Elements/a#hreflang) HTML attribute, indicating the language of the linked resource.
+- {{domxref("HTMLAnchorElement.interestForElement")}} {{experimental_inline}} {{ReadOnlyInline}}


The interestForElement shouldn't be marked readonly - it can be written also, just like all other element reference reflections.

Ah, this is a good call. I've removed those macro calls and updated the description appropriately.

I've also changed the examples on the interestForElement ref pages and the basic API example in the guide to use interestForElement to set up the invoker/target relationship rather than the interestFor attribute, as I think it's important to make it clear that you can set up the relationship programmatically as well as declaratively.

mfreed7 · 2025-11-21T18:18:17Z

files/en-us/web/api/popover_api/interest_invokers/index.md

+</p>
+<p id="mytooltip" popover="hint">A hover toolip</p>
+<p id="myinfobox" popover>
+  An infobox that also contains some control buttons<br />


nit: just <br> without the xhtml trailing slash. 😄

I would love it if we were able to get rid of XHTML trailing slashes on MDN, but unfortunately, we lint all the markup with prettier, which enforces them 😢

mfreed7 · 2025-11-21T18:22:32Z

files/en-us/web/api/popover_api/interest_invokers/index.md

+
+{{embedlivesample("interest-invoker-styling", "100%", "150")}}
+
+Try showing interest in the button (for example by hovering or focusing it) to observe the behavior described earlier.


Somewhere, perhaps right here, it might be interesting to add a common use case:

container:has(:interest-source) { interest-show-delay: 0s; }

I.e. when you've already shown interest in something (within a container of some sort), remove the show delay on subsequent elements, so that you can quickly move between them.

Hrm, I think this needs a bit more explanation. I understand the logic of what you are saying, but I can't seem to get this to work. after I've pushed my next commit, the updated code should be available at https://pr42021.review.mdn.allizom.net/en-US/docs/Web/API/Popover_API/Interest_invokers#styling_interest_invokers. Have a look and let me know what I am doing wrong ;-)

mfreed7 · 2025-11-21T18:23:56Z

files/en-us/web/api/popover_api/interest_invokers/index.md

+
+### Result
+
+This renders as follows:


mfreed7 · 2025-11-21T18:25:10Z

files/en-us/web/api/popover_api/interest_invokers/index.md

+{{embedlivesample("link-preview-popover", "100%", "260", , , , , "allow-popups")}}
+
+Try hovering/focusing the link to show the preview popover. There is also progressive enhancement at play in this example — in non-supporting browsers, the link will still work as expected.
+


Overall - very nice overview page for the API. 😄

Cool, glad you like it!

mfreed7 · 2025-11-21T18:29:00Z

files/en-us/web/api/htmlelement/interest_event/index.md

+
+The **`interest`** event of the {{domxref("HTMLElement")}} interface is fired on an [interest invoker](/en-US/docs/Web/API/Popover_API/Interest_invokers)'s target element when interest is shown, allowing code to be run in response.
+
+This event is not [cancelable](/en-US/docs/Web/API/Event/cancelable).


The interest event is always cancelable. The loseinterest event is usually cancelable, except in a few cases, such as when the user hits the ESC key to lose interest in everything in the document.

Ah, gotcha. I've updated both pages as appropriate.

mfreed7 · 2025-11-21T18:33:06Z

files/en-us/web/css/reference/properties/interest-delay/index.md

+
+## Formal definition
+
+{{CSSInfo}}


Note that these are broken, at least in the preview. Probably just a preview issue.

Yeah, I think this info needs to be added. I'll look into it.

mfreed7 · 2025-11-21T18:34:53Z

files/en-us/web/css/reference/properties/interest-delay-start/index.md

+
+{{SeeCompatTable}}
+
+The **`interest-delay-start`** [CSS](/en-US/docs/Web/CSS) property specifies a delay between the user showing interest in an [interest invoker](/en-US/docs/Web/API/Popover_API/Interest_invokers) element and the target element effect starting.


Perhaps a personal nit, but "target element effect starting" sounds a bit vague. Do you want to say something like "and the interest event being fired, which typically starts an effect on the target" ? Or just the first part?

I like this wording; updated on all the property pages.

Document interest invokers

d49943b

chrisdavidmills requested review from a team as code owners November 19, 2025 16:44

chrisdavidmills requested review from dipikabh and sideshowbarker and removed request for a team November 19, 2025 16:45

github-actions bot added the Content:WebAPI Web API docs label Nov 19, 2025

chrisdavidmills changed the title ~~Document interest invokers~~ Technical review: Document interest invokers Nov 19, 2025

chrisdavidmills marked this pull request as draft November 19, 2025 16:45

github-actions bot added the size/l [PR only] 501-1000 LoC changed label Nov 19, 2025

Josh-Cena reviewed Nov 19, 2025

View reviewed changes

files/en-us/web/api/popover_api/index.md Outdated Show resolved Hide resolved

Add interestfor attribute to element reference pages

8acc235

github-actions bot added Content:HTML Hypertext Markup Language docs Content:SVG SVG docs labels Nov 19, 2025

chrisdavidmills added 3 commits November 20, 2025 12:02

Document interestForElement property

307a9f9

Remove interface prefixes from events

e2b424e

Add interest and loseinterest events

20cdaef

github-actions bot added size/xl [PR only] >1000 LoC changed and removed size/l [PR only] 501-1000 LoC changed labels Nov 20, 2025

chrisdavidmills added 2 commits November 20, 2025 13:36

Add InterestEvent reference docs

4b88315

Add interest-delay ref pages

c6ceb25

github-actions bot added the Content:CSS Cascading Style Sheets docs label Nov 20, 2025

Add pseudo-classes

4d4aafd

chrisdavidmills removed the request for review from sideshowbarker November 21, 2025 10:07

chrisdavidmills marked this pull request as ready for review November 21, 2025 10:07

chrisdavidmills requested review from a team as code owners November 21, 2025 10:07

mfreed7 reviewed Nov 21, 2025

View reviewed changes

sideshowbarker removed the request for review from a team November 22, 2025 11:02

chrisdavidmills added 2 commits November 22, 2025 13:16

Merge branch 'main' into interest-invokers

f5ec776

fixes for mfreed7 review comments

743bc14

chrisdavidmills requested a review from mfreed7 November 22, 2025 14:57


		{{embedlivesample("interest-invoker-styling", "100%", "150")}}

		Try showing interest in the button (for example by hovering or focusing it) to observe the behavior described earlier.

		{{embedlivesample("link-preview-popover", "100%", "260", , , , , "allow-popups")}}

		Try hovering/focusing the link to show the preview popover. There is also progressive enhancement at play in this example — in non-supporting browsers, the link will still work as expected.


		The `interest` event of the {{domxref("HTMLElement")}} interface is fired on an [interest invoker](/en-US/docs/Web/API/Popover_API/Interest_invokers)'s target element when interest is shown, allowing code to be run in response.

		This event is not [cancelable](/en-US/docs/Web/API/Event/cancelable).


		{{SeeCompatTable}}

		The `interest-delay-start` [CSS](/en-US/docs/Web/CSS) property specifies a delay between the user showing interest in an [interest invoker](/en-US/docs/Web/API/Popover_API/Interest_invokers) element and the target element effect starting.

Technical review: Document interest invokers #42021

Are you sure you want to change the base?

Technical review: Document interest invokers #42021

Uh oh!

Conversation

chrisdavidmills commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

github-actions bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mfreed7 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chrisdavidmills commented Nov 19, 2025 •

edited

Loading

github-actions bot commented Nov 19, 2025 •

edited

Loading